<template>
    <div>
        <el-card style="margin-bottom:10px" v-loading="loading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-input placeholder="请输入内容" v-model="fieldVal" class="input-with-select">
             <el-select v-model="field" slot="prepend" placeholder="请选择" style="width:110px">
                <el-option label="班级期号" value="class_name"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="getClasses"></el-button>
            </el-input>
        </el-card>
      <el-card v-loading="loading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
            <template #header>
                <span>班级管理 </span>
                <el-button @click="add()" size="mini" type="primary">添加</el-button>
            </template>
            <el-table :data="classes" stripe>
                <el-table-column prop="class_name" label="班级期号"></el-table-column>
                <el-table-column label="操作" >
                    <template #default="{row}">
                      <el-switch @change="changeStatus(row.id,$event)" active-value="1" inactive-value="0" v-model="row.status"></el-switch>
                       <el-button type="danger" size="mini" @click="del(row.id)">删除</el-button>
                       <el-button type="primary" size='mini' @click="edit(row.id)">编辑</el-button>  
                    </template>
                </el-table-column> 
            </el-table>
            <div style="margin-top:10px">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="toPage" :pager-count="5"></el-pagination>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
  data() {
    return {
      classes: [],
      currentPage: 0,
      pageSize: 5,
      total: 0,
      field: "class_name",
      fieldVal: "",
      loading: false
    };
  },

//   编辑数据完毕，保存时刷新数据
  beforeRouterEnter(to,from,next){
      next(vm=>{
          vm.getClasses();
      })
  },
  created() {
    this.getClasses();
  },
  methods: {
    async getClasses(page = 1) {
      this.loading = true; //异步请求开始loading打开
      const {
        data: { data: { rows, pageSize, currentPage, total } }
      } = await this.axios({
        methods: "get",
        url: "/classes",
        params: {
          pageSize: 5,
          currentPage: page,
          field: this.field, //按username查询
          fieldVal: this.fieldVal //模糊查询
        }
      });
      this.classes = rows;
      this.loading = false;//异步请求成功loading关闭
      (this.pageSize = pageSize),
        (this.currentPage = currentPage),
        (this.total = total);
    },
    toPage(num) {
      this.getClasses(num);
    },
    async changeStatus(id, e) {
      this.loading = true;
      this.axios({
        method: "put",
        url: `/classes/edit/${id}`,
        data: {
          status: e
        }
      });
      //根对象触发changeStatus事件
      this.$root.$emit("changeStatus");
      this.loading = false;
    },
    async del(id){
      await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          type: 'warning'
        });
      this.loading=true;
      await this.axios({
           method:'delete',
           url:`/classes/del/${id}`
       });
       this.loading=false; 
       this.$message.success('删除成功');
       this.getClasses();
    },
    add(){
        this.$router.push({
            name:'HomeClassesAdd'
        })
    },
   edit(id){
        this.$router.push({
            name:'HomeClassesEdit',
            params:{
                id,
            }
        })
   },
  }
};
</script>

